<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui\src\css\layui.css">
    <style>
        .site-doc-icon li{width: 50%;}
        .site-doc-icon li .layui-anim{width: 125px; height: 125px; line-height: 125px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
        .site-doc-icon li .code{white-space: nowrap;}
        </style>
</head>
<body>
    <div style="max-width: 1140px;"> 
        <ul class="layui-border-box site-doc-icon site-doc-anim">
          <li>
            <div class="layui-anim" data-anim="layui-anim-down">顶部往下滑入</div>
            <div class="code">layui-anim-down</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-downbit">微微往下滑入</div>
            <div class="code">layui-anim-downbit</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-up">底部往上滑入</div>
            <div class="code">layui-anim-up</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
            <div class="code">layui-anim-upbit</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
            <div class="code">layui-anim-scale</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
            <div class="code">layui-anim-scaleSpring</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-scalesmall">平滑放小</div>
            <div class="code">layui-anim-scalesmall</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-scalesmall-spring">弹簧式放小</div>
            <div class="code">layui-anim-scalesmall-spring</div>
          </li>
          
          
          <li>
            <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
            <div class="code">layui-anim-fadein</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
            <div class="code">layui-anim-fadeout</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
            <div class="code">layui-anim-rotate</div>
          </li>
          <li>
            <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
            <div class="code">追加：layui-anim-loop</div>
          </li>
        </ul>
      </div>
</body>
<script src="layui\src\layui.js"></script>
<script>
    layui.use('jquery', function(){
      var $ = layui.$;
      
      //演示动画
      $('.site-doc-icon .layui-anim').on('click', function(){
        var othis = $(this), anim = othis.data('anim');
     
        //停止循环
        if(othis.hasClass('layui-anim-loop')){
          return othis.removeClass(anim);
        }
        
        othis.removeClass(anim);
        
        setTimeout(function(){
          othis.addClass(anim);
        });
        //恢复渐隐
        if(anim === 'layui-anim-fadeout'){
          setTimeout(function(){
            othis.removeClass(anim);
          }, 1300);
        }
      });
    });
    </script>
</html>